<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <div>
                <div style="width: 500px;float: left">
                    <el-input
                            placeholder="输入关键字进行过滤"
                            v-model="filterText">
                    </el-input>
                    <el-tree
                            class="filter-tree"
                            :data="menuData"
                            node-key="mid"
                            :props="defaultProps"
                            default-expand-all
                            :filter-node-method="filterNode"
                            ref="tree">
                    </el-tree>
                </div>
                <div style="float: left;width: 500px;margin-left: 50px">
                    <div>
                        <el-form ref="menuForm" :model="menuForm" :rules="rules" label-position="left" label-width="80px">
                            <el-form-item label="父菜单" prop="mpid">
                                <el-select v-model="menuForm.mpid" placeholder="请选择父菜单">
                                    <el-option
                                            v-for="item in fatherMenu"
                                            :key="item.mid"
                                            :label="item.mname"
                                            :value="item.mid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="菜单名称" prop="mname">
                                <el-input v-model="menuForm.mname"></el-input>
                            </el-form-item>
                            <el-form-item label="菜单路由">
                                <el-input v-model="menuForm.url"></el-input>
                            </el-form-item>
                            <el-form-item label="菜单图标">
                                <el-input v-model="menuForm.icon"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addMenu('menuForm')">立即创建</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin-top: 300px">
                        <el-form ref="form"   label-position="left" label-width="80px">
                            <el-form-item label="选择菜单">
                                <el-select v-model="mid" placeholder="请选择菜单">
                                    <el-option
                                            v-for="item in allMenu"
                                            :key="item.mid"
                                            :label="item.mname"
                                            :value="item.mid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="deleteMenuByMenuid">立即删除</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        data() {
            return {
                filterText: '',
                menuData: [],
                defaultProps: {
                    children: 'sonMenu',
                    label: 'mname'
                },
                menuForm:{
                    mname: '',
                    url: '',
                    mpid: '',
                    icon: ''
                },
                rules: {
                  mname : [
                      { required: true, message: '请输入菜单名称', trigger: 'blur' },
                  ],
                  mpid: [
                      { required: true, message: '请输入选择', trigger: 'blur' },
                  ]
                },
                fatherMenu: [
                ],
                allMenu: [],
                mid: ''
            };
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.mname.indexOf(value) !== -1;
            },
            // 查询全部的菜单父子关系
            showAllMenu() {
                this.$axios({
                    method: 'get',
                    url:'clms-system/menu/showAllMenu',
                }).then( result => {
                    this.menuData = result.data.listData;
                })
            },
            // 查询全部的菜单，无父子关系
            showMenu() {
                this.$axios({
                    method: 'get',
                    url:'clms-system/menu/showMenu',
                }).then( result => {
                    this.allMenu = result.data.listData;
                })
            },
            // 查询全部的父菜单
           showAllFatherMenu() {
               this.fatherMenu.push({
                   "mid":"0",
                   "mname":"无父菜单"
               });
               this.$axios({
                   method: 'get',
                   url:'clms-system/menu/showAllFatherMenu',
               }).then( result => {
                    result.data.listData.forEach( value => {
                        this.fatherMenu.push(value);
                    });
               })
            },
            // 添加菜单
            addMenu(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method: 'post',
                            url: 'clms-system/menu/addMenu',
                            data: this.menuForm
                        }).then( result => {
                            if (result.data.code == 200) {
                                this.$message.success(result.data.message);
                                this.menuForm = {};
                                this.showAllMenu();
                                this.showMenu();
                                this.showAllFatherMenu()
                            } else {
                                this.$message.error(result.data.message)
                            }
                        })
                    } else {
                       this.$message.error("数据输入有误")
                    }
                });
            },
            // 删除菜单
            deleteMenuByMenuid() {
                this.$axios({
                    method: 'get',
                    url: 'clms-system/menu/deleteMenuByMenuid',
                    params: {
                        mid: this.mid
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.$message.success(result.data.message);
                        this.showAllMenu();
                        this.showMenu();
                        this.showAllFatherMenu()
                    } else {
                        this.$message.error(result.data.message)
                    }
                })
            }
        },
         created() {
             this.showAllMenu();
             this.showMenu();
             this.showAllFatherMenu()
        }
    };
</script>